import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import Example from '../../../examples/enable-click-to-copy';

<Head>
  <title>Click to Copy Guide - Material React Table V3 Docs</title>
  <meta
    name="description"
    content="How to use and customize the click to copy features of Material React Table"
  />
</Head>

## Click to Copy Feature Guide

Material React Table has an easy-to-implement feature that allows a user to copy a cell's value to the clipboard.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={new Set(['enableClickToCopy', 'muiCopyButtonProps'])}
/>

### Relevant Column Options

<ColumnOptionsTable
  onlyOptions={new Set(['enableClickToCopy', 'muiCopyButtonProps'])}
/>

### Enable Click to Copy Per Column

Most likely, there will just be a couple columns that you want to enable click to copy for. You can do this by setting the `enableClickToCopy` option to `true` per column on the column definition.

```tsx
const columns = [
  //...
  {
    accessorKey: 'email',
    header: 'Email',
    enableClickToCopy: true,
  },
  //...
];
```

### Enable Click to Copy For All Cells

Alternatively, you can enable click to copy globally by setting the `enableClickToCopy` table option to `true`. You could then opt out per column by setting the `enableClickToCopy` option to `false` on the column definition.

```tsx
const table = useMaterialReactTable({
  columns,
  data,
  enableClickToCopy: true,
});
```

### Customize Copy Buttons

The click to copy feature is built on top of the Material UnstyledButton and CopyButton components. You can customize the copy button by passing in the `muiCopyButtonProps` table or column option.

```tsx
const table = useMaterialReactTable({
  columns,
  data,
  enableClickToCopy: true,
  muiCopyButtonProps: {
    sx: { width: '100%' },
    startIcon: <ContentCopy />,
  },
});
```

### Click to Copy Example

<Example />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-click-to-copy-examples)**
